<template>
  <PageListContainer>
    <BreadCrumb>
      <template #default>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>大赢加讲师数据</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ name: 'AgencyDyjLecturerLecturerList' }">讲师发放管理</el-breadcrumb-item>
          <el-breadcrumb-item>绑定列表</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
    </BreadCrumb>
    <div class="base-block">
      <k-search :model="state.params" @search="methods.onSearch" @reset="methods.onReset">
        <el-form-item label="账号搜索">
          <el-input
            v-model="state.params.keyword"
            clearable
            placeholder="请输入账号名、手机号"
          />
        </el-form-item>
        <el-form-item label="绑定状态">
          <el-select v-model="state.params.status" placeholder="不限">
            <el-option
              v-for="item in statusOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="是否续费">
          <el-select v-model="state.params.renewal" placeholder="不限">
            <el-option
              v-for="item in renewalOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </k-search>
    </div>
    <div class="base-block">

      <KTable v-loading="state.loading" v-bind="tableState" v-on="tableEvent">
        <template #nick_name="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ s.row.nick_name }}</span>
        </template>
        <template #mobile="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ s.row.mobile }}</span>
        </template>
        <template #bind_time="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ s.row.bind_time === 0
            ? "--"
            : formatDateTime(s.row.bind_time) }}</span>
        </template>
        <template #usedText="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ usedMap[s.row.bind_status] || "--" }}</span>
        </template>
        <template #statusText="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ formatDayStrArr(s.row.bind_duration)[0] }}</span>
        </template>
        <template #isRenewalText="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ renewalMap[s.row.is_renewal] }}</span>
        </template>
        <template #renewal_cnt="s">
          <span
            class="flex-center"
            :class="s.row.bind_status === 0 ? 'disable' : ''"
          >{{ s.row.renewal_cnt }}</span>
        </template>
      </KTable>
    </div>
  </PageListContainer>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { formatDayStrArr, formatDateTime } from '@/utils';
import { useTableList, renewalMap, usedMap, statusOptions, renewalOptions } from './hooks/use-table';

import BreadCrumb from '@/components/base-bread-crumb/index.vue';
defineOptions({ name: 'AgencyDyjLecturerBindingList' });
const route = useRoute();
const agentId = route.params.agent_id;
const { state, tableState, tableEvent, ...methods } = useTableList({
  getParams: (params: Record<string, any>) => {
    return {
      ...params,
      agent_id: Number(agentId)
    };
  }
});
</script>
<style lang="scss" scoped>
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;

  &.disable {
    color: #86909c;
  }
}
</style>
